<DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>mydemo</title>
        <style type="text/css">
            body,#outer p {margin:0;padding:0;}
            html,body {height:100%;}
            #outer {border:20px black solid;background:black;width:200px;height:200px; margin:10px auto;}
            #outer p {color: white;padding:10px;}
        </style>
        <script type="text/javascript">
            window.onload = function() {
            /*border,background,color,cursor*/
                var oDiv = document.getElementById("outer");
                var oP = document.getElementsByTagName("p")[0];
                oDiv.onmouseover = function() {
                    this.style.cssText="border-color:red;background:white;cursor:crosshair";
                    oP.style.cssText = "color:red";
                }
                oDiv.onmouseout = function() {
                    this.style.cssText = "";
                    oP.style.cssText = "";
                }
                
            }
        </script>
    </head>
    <body>
        <div id="outer">
            <p>鼠标移入改变样式，鼠标移出恢复。</p>            
        </div>
    </body>
</html>